<template>
  <section class="main">
    <el-card>
      <el-table
      max-height="500"
      :data="hotbaozi_list"
      style="width: 100%">
        <el-table-column
          label="标题"
          width="350">
          <template slot-scope="scope">
            <span v-html="scope.row.product_name"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="内容"
          width="350">
          <template slot-scope="scope">
            <span v-html="scope.row.product_title"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="图片"
          width="350">
          <template slot-scope="scope">
            <el-image :src="scope.row.product_image" width="10" height="10" class="head_pic"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </section>
</template>

<script>
import { product, deleteData } from "../../utils/api";
export default {
  name: "draglist",
  data() {
    return {
      params: {
        type: 3
      },
      hotbaozi_list: [],
      recommend_show: "",
      deleteParams: {
        type: "product",
        id: ""
      }
    };
  },
  components: {
    // draggable
  },
  created() {
    this.getHotBaozi();
  },
  methods: {
    // 删除指定ID数据
    handleDelete(index, row) {
      this.deleteParams.id = row.product_id;
      this.$confirm("确认删除？").then(() => {
        deleteData(this.deleteParams).then(
          this.$message("删除成功"),
          this.getHotBaozi()
        );
      });
    },
    // 获取爆款包子
    getHotBaozi() {
      product(this.params).then(res => {
        this.hotbaozi_list = res.data.results;
      });
    },
    delete_carousel_content(index) {
      this.hotbaozi_list.splice(index, 1);
    },
    add_carousel_content() {
      const temp = {
        url:
          "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        title: "默认",
        content: "默认",
        price: "默认"
      };
      this.hotbaozi_list.push(temp);
    },
    removeHandle(event) {
      console.log(event);
      this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  .hotbaozi_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .carousel_content {
      width: 90%;
      height: 100%;
      position: relative;
      margin: 0;
      margin-top: 34px;
      margin-bottom: 65px;
      display: flex;

      i:first-child {
        cursor: pointer;
        position: absolute;
        // width: 40px;
        // height: 40px;
        border-radius: 50%;
        // background: red;
        top: 0px;
        left: 0px;
        transform: translate(-50%, -50%);
        font-size: 50px;
        z-index: 2;
      }

      .image_inner {
        position: relative;
        width: 741px;
        height: 342px;
        background: #f1f1f1;
        border-radius: 50px 0 0 0;

        // .el-carousel__item {
        //     height: 342px;
        // }

        // & /deep/ .el-carousel__indicators--outside {
        //     position: absolute;
        //     width: fit-content;
        //     left: 600px;
        //     bottom: 15px;

        //     .is-active {
        //         .el-carousel__button {
        //             background: #db392b;
        //         }
        //     }
        // }

        // & /deep/ .el-carousel__button {
        //     width: 10px;
        //     height: 10px;
        //     border-radius: 50%;
        //     border: 1px solid #db392b;
        //     background: transparent;
        // }
      }
      .recomend_show {
        width: 459px;
        height: 342px;
        background: #d83b2a;
        padding: 50px 66px 43px 58px;
        box-sizing: border-box;

        .recomend_show_p1 {
          margin: 0;
          border: 1px solid #ffffff;
          background: #d83b2a;
          color: #ffffff;
          text-align: center;
          padding: 7px 15px 8px 15px;
          width: fit-content;
          font-size: 26px;
          font-weight: 500;
          margin-bottom: 16px;
        }
        .recomend_show_p2 {
          margin: 0;
          font-size: 16px;
          font-weight: bold;
          color: #fff;
          margin-bottom: 10px;
        }
        .recomend_show_p3 {
          height: fit-content;

          margin: 0;
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;
          color: #fff;
          margin-bottom: 15px;
        }
        .recomend_show_p4 {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;
          color: #fff;
        }
      }
    }

    .add_area {
      width: 100%;
      height: 342px;
      background: #f1f1f1;
      box-sizing: border-box;
      border: 1px dashed #e1e1e1;

      .plus_icon {
        position: relative;
        cursor: pointer;
        width: 100%;
        height: 100%;
        background: transparent;
        i {
          position: absolute;
          width: 1%;
          height: 30%;
          background: #919191;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          &:last-child {
            transform: translate(-50%, -50%) rotate(90deg);
          }
        }
      }
    }
  }
}
.drag-box {
  display: flex;
  user-select: none;
}
.drag-box-item {
  flex: 1;
  max-width: 330px;
  min-width: 300px;
  background-color: #eff1f5;
  margin-right: 16px;
  border-radius: 6px;
  border: 1px #e1e4e8 solid;
}
.item-title {
  padding: 8px 8px 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  font-weight: 600;
}
.item-ul {
  padding: 0 8px 8px;
  height: 500px;
  overflow-y: scroll;
}
.item-ul::-webkit-scrollbar {
  width: 0;
}
.drag-list {
  border: 1px #e1e4e8 solid;
  padding: 10px;
  margin: 5px 0 10px;
  list-style: none;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: border 0.3s ease-in;
  transition: border 0.3s ease-in;
}
.drag-list:hover {
  border: 1px solid #20a0ff;
}
.drag-title {
  font-weight: 400;
  line-height: 25px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
.ghost-style {
  display: block;
  color: transparent;
  border-style: dashed;
}
</style>
